<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-header {
            background-color: #545c64;
        }

        .header-img {
            width: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--容器-->
        <el-container>
            <el-header>
                <el-container>
                    <div><!--<img src="img/export.png"/>-->
                    <el-image src="img/export.png"  class="header-img"></el-image>
                </div>
                    <!--菜单控制台start-->
                    <el-menu
                            class="el-menu-demo"
                            mode="horizontal"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            style="margin-left: auto"
                    >
                        <el-menu-item index="1">处理中心</el-menu-item>
                        <el-submenu index="2">
                            <template slot="title">我的工作台</template>
                            <el-menu-item index="2-1">选项1</el-menu-item>
                            <el-menu-item index="2-2">选项2</el-menu-item>
                            <el-menu-item index="2-3">选项3</el-menu-item>
                            <el-submenu index="2-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="2-4-1">选项1</el-menu-item>
                                <el-menu-item index="2-4-2">选项2</el-menu-item>
                                <el-menu-item index="2-4-3">选项3</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="3" disabled>消息中心</el-menu-item>
                        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
                    </el-menu>
                    <!--菜单控制台end-->
                </el-container>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <!--左侧导航菜单 start -->
                    <el-menu

                            class="el-menu-vertical-demo"
                           >
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>旅游线路管理</span>
                            </template>

                                <el-menu-item index="1-1" @click="findAll">线路管理</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                                <el-menu-item index="1-3">选项3</el-menu-item>

                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span>
                        </el-menu-item>
                    </el-menu>
                    <!--左侧导航菜单 end -->
                </el-aside>
                <el-main>
                    <!--主体内容 start-->
                    <iframe :src="iframeSrc" frameborder="false" style="top:80px;left: 120px; width: 100%;height:700px"></iframe>
                    <!--主体内容 end-->
                </el-main>
            </el-container>
        </el-container>

    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data:{
            iframeSrc: "manager.html",
            tableData:[
                {
                    date:"2088-08-08",
                    name:"张三",
                    address:"北京市顺义区"
                },{
                    date:"2088-08-08",
                    name:"李四",
                    address:"北京市顺义区"
                },{
                    date:"2088-08-08",
                    name:"王五",
                    address:"北京市顺义区"
                },
            ]
        },
        methods:{
            findAll:function () {
                this.iframeSrc = "routeList.html"
            }
        }
    })
</script>
</html>